<template>
    <div>
        <NavTop/>
        <div class="common-layout">
            <el-container>
            <el-aside width="200px"><NavLeft @handle="dadHandle"/></el-aside>
            <el-container>
                <el-header><MySwiper/></el-header>
                <br><br><br><br><br><br><br><br>
                <el-main><MyList :list="list"/></el-main>
            </el-container>
            </el-container>
        </div>  
    </div>
</template>

<script>
import MyList from '@/components/MyList.vue';
import MySwiper from '@/components/MySwiper.vue';
import NavLeft from '@/components/NavLeft.vue';
import NavTop from '@/components/NavTop.vue';
import axios from 'axios';

export default{
    data() {
        return {
            list:[],
            originalList:[]
        }
    },
    components:{
        NavTop,
        NavLeft,
        MySwiper,
        MyList
    },
    mounted() {
        axios.get('goodslist.json').then(res=>{
            this.list = res.data.goodslist
            this.originalList = res.data.goodslist; // 保存原始数据
            this.list = this.originalList;          // 初始化显示数据
        })
    },
    methods:{
        dadHandle(val) {
            this.list = this.originalList.filter(v => v.cid == val);
            console.log(this.list)
        }
    }
}
</script>

<style>
.el-header{
    --el-header-padding:0 !important;
    height:550px !important;
}
</style>